<template>
  <div id="wrapper">
    <img id="logo" src="../assets/login/logo.png" />
    <div class="login-input">
      <input type="text" placeholder="Seed" v-model="password" />
      <i class="icon icon-question"></i>
    </div>
    <div class="login-in" @click="login">
      <img src="../assets/login/login_enter.png" />
    </div>
  </div>
</template>

<script>
  export  default {
    data(){
      return{
          password:''
      }
    },
    methods:{
      login(){
        if(this.password === ''){
          this.$message({
            type:'error',
            message:'请输入Seed',
            center:true
          });
        }else{
          this.$router.push({
              path:'/setpwd'
          })
        }
      }
    }
  }
</script>

<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  #wrapper {
    background:
      radial-gradient(
        ellipse at top left,
        rgba(34,109,179, .8) 40%,
        rgba(34,109,179, 1) 100%
      );
    height: 100vh;
    padding: 120px 140px;
    width: 100vw;
    text-align: center;
  }
  #logo {
    height: auto;
    margin-bottom: 111px;
    width: 160px;
  }
  .login-input{
    width: 100%;
    border-bottom: 1px #fff solid;
    position: relative;
  }
  .login-input > input{
    width: 100%;
    background: none;
    outline: none;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 7px 25px 7px 0;
    color: #fff;
    font-size: 16px;
  }
  .login-input > input::-webkit-input-placeholder{
    color: #fff;
  }
  .login-in{
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-top: 33px;
    cursor: pointer;
  }
  .login-in > img{
    width: 100%;
  }
  .icon{
    display: inline-block;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }
  .login-input .icon-question{
    width: 19px;
    height: 19px;
    background: url("../assets/login/login_question.png") no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 5px;
    right: 0;
    cursor: pointer;
  }
</style>
